<%--
  Created by IntelliJ IDEA.
  User: 86177
  Date: 2023/6/15
  Time: 13:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Student</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100vh;
        }
        nav{
            display: flex;
            top: 0;
            left: 0;
            bottom:0;
            height: 50px;
            width: calc(100% - 400px);
            margin: 0 200px;
            padding: 10px;
            background-color: #78eaf1;
            justify-content: space-between;
        }
        .title{
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .title h3{
            font-size: 20px;
            font-weight: bolder;
            color: white;
            font-family: 微软雅黑;
        }
        .functions{
            width: 50%;
            height: 100%;
            display: flex;
        }
        .functions ul{
            display: flex;
            width: 100%;
            height: 100%;
        }
        .functions ul li{
            display: flex;
            text-decoration: none;
            width: 30%;
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            font-weight: bolder;
            color: white;
            cursor: pointer;
            font-family: 微软雅黑;
        }
        .functions ul li a{
            color: white;
            text-decoration: none;
        }
        .user{
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user h3{
            font-size: 18px;
            font-weight: bolder;
            font-family: 微软雅黑;
            width: 60%;
        }
        .user h3 a{
            color: white;
            text-decoration: none;
        }
        .sidebar{
            z-index: 9;
            position: relative;
            left: 100px;
            top: 0;
            margin-top: 100px;
            width: 100px;
            height: 150px;
            background-color: #78eaf1;
        }
        .sidebar ul{
            width: 100%;
            height: 100%;
        }
        .sidebar ul li{
            width: 100%;
            height: 50px;
            justify-content: center;
            align-items: center;
            display: flex;
            text-decoration: none;
        }
        .sidebar ul li a{
            font-size: 15px;
            font-weight: bolder;
            color: white;
            text-decoration: none;
            font-family: 微软雅黑;
        }
        .main{width: 100%;
            display: flex;
        }
        .iframe{
            border: none;
            position: relative;
            width: calc(100% - 380px);
            height: 80vh;
            left: 100px;
        }
        iframe{
            border: none;
        }
        .photo{
            background: url("../images/student.jpeg");
            background-size:100%,100%;
        }  <!-- 背景图片-->
    </style>
    <script>
        var url;
        function funOne(url){
            document.getElementById("ifrme").src=url;
        }
    </script>
</head>
<body class="photo">
<nav>
    <div class="title"><h3>座位预约学生界面</h3></div>
    <div class="functions">
        <ul>
            <li><a href="#" onclick=funOne("Knowledge.jsp")>使用须知</a></li>
            <li><a href="#" onclick=funOne("AddInform.jsp")>留言</a></li>
            <li><a href="#" onclick=funOne("LookAnnouncement.jsp")>公告</a></li>
        </ul>
    </div>
    <div class="user"><h3><a href="#" onclick=funOne("UserStuMessage.jsp")>个人中心</a></h3><h3><a href="LogIn.jsp" >退出</a></h3></div>
</nav>
<div class="main">
    <div class="sidebar">
        <ul>
            <li><a href="#" onclick=funOne("SeatServlet")>普通座位</a></li>
            <li><a href="#" onclick=funOne("ReadroomServlet")>朗读亭</a></li>
            <li><a href="#" onclick=funOne("SeminarServlet")>研讨间</a></li>
        </ul>
    </div>
    <div class="iframe">
        <iframe src="SeatServlet" id="ifrme" width=100% height=100%></iframe>
    </div>
</div>
</body>
</html>